<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div style="width: 1px;height: 1px;background-color: pink;"></div>

    <script>

        const vue = new Vue({
            data() {
                return {
                    name: 'zs',
                    age: 18,
                    array: [1],
                    obj: {
                        a: 1,
                        obj2: {
                            b: 1,
                            obj3: {
                                c: 1
                            }
                        }
                    }
                }
            },
            computed: {
                x() {
                    return this.age + this.array[0]
                }
            },
            watch: {
                x() {
                    console.log('x 发生了变化')
                },
                obj() {
                    console.log('watch 改变了------ age')
                },
                array() {
                    console.log('array 变了--------------')
                }
            }
        })


        vue.$watch('name', function () {
            console.log('name upload ing', this)
        })

        vue.name = 1
        vue.name = 2
        vue.name = 3
        vue.name = 4
        vue.name = 5
        vue.name = 6
        vue.name = 7
        vue.$set(vue.obj, 'name', 'jake')
        vue.obj.name = 'ls'
        vue.array.push(12)


    </script>

</body>

</html>